<template>
  <el-input style="width: 200px" size="mini"></el-input>
  <el-button type="primary" @click="addTable" size="mini">
    <el-icon size="12"><search /></el-icon>
    搜索
  </el-button>
  <el-button type="primary" @click="addTable" size="mini">
    <el-icon size="12"><plus /></el-icon>
    新增
  </el-button>
  <el-dialog title="提示" v-model="dialogVisible" width="60%">
    <el-form
      ref="form_ref"
      :model="form"
      size="mini"
      label-position="right"
      label-width="auto"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="artifactid">
            <el-input v-model="form.package_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="groupId">
            <el-input v-model="form.package_groupid"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="包版本">
            <el-input v-model="form.package_versions"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="别名">
            <el-input v-model="form.package_nick"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="git地址">
        <el-input v-model="form.package_git_url"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="分支">
            <el-input v-model="form.branch"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目id">
            <el-input v-model="form.project_id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注">
            <el-input type="text" v-model="form.comment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="仓库类型">
            <SysCodeInput
              sys_code_type="package_repository_type"
              @childClick="repository_codeClick"
              :sys_code_value="form.package_repository_code"
            ></SysCodeInput>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="包类型">
            <el-select v-model="form.package_type_code" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-collapse>
            <el-collapse-item title="maven_settings" name="1">
              <el-input
                type="textarea"
                :rows="15"
                placeholder="请输入内容"
                v-model="form.maven_settings"
              >
              </el-input>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" type="primary" @click="handleInsert">{{
          hanlderCtrName
        }}</el-button>
        <el-button size="mini" @click="handleCancel">取消</el-button>
      </span>
    </template>
    <!--    <template #footer>-->
    <!--      &lt;!&ndash;    </span>&ndash;&gt;-->
    <!--    </template>-->
  </el-dialog>
  <el-table
    highlight-current-row
    :cell-style="{ padding: 0 }"
    :data="tableData1"
    ref="multipleTable"
    style="font-size: 10px; width: 100%; padding: 0"
  >
    <el-table-column label="别名" prop="package_nick"> </el-table-column>
    <el-table-column
      show-overflow-tooltip
      label="artifactid"
      prop="package_name"
    >
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      label="groupId"
      prop="package_groupid"
    >
    </el-table-column>
    <el-table-column label="包版本" prop="package_versions"> </el-table-column>
    <el-table-column
      show-overflow-tooltip
      label="git地址"
      prop="package_git_url"
    >
    </el-table-column>
    <el-table-column label="分支" prop="branch"> </el-table-column>
    <el-table-column label="仓库类型" prop="package_repository_code">
    </el-table-column>
    <el-table-column label="包类型" prop="package_type_code"> </el-table-column>
    <el-table-column label="操作" prop="id" min-width="100px">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.row)">编辑 </el-button>

        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除
        </el-button>
      </template>
    </el-table-column>

    <el-table-column label="部署" prop="id">
      <el-dropdown>
        <el-button type="primary" size="mini">
          更多
          <el-icon size="12"><magic-stick /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>打包</el-dropdown-item>
            <el-dropdown-item>生成镜像</el-dropdown-item>
            <el-dropdown-item>更新</el-dropdown-item>
            <el-dropdown-item>部署</el-dropdown-item>
            <el-dropdown-item>回滚</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-table-column>
  </el-table>
</template>

<script>
import * as Request from "@/general/request";
import SysCodeInput from "@/components/communal/sys_code_input.vue";
import { ref, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";

export default {
  name: "package_manage",
  setup() {
    let form = ref({
      package_name: "",
      package_versions: "",
      branch: "",
      package_git_url: "",
      package_repository_code: "",
      package_type_code: "",
      comment: "",
      maven_settings: "",
    });
    let tableData1 = ref([]);

    let editorOrCreateType = ref("");
    let hanlderCtrName = ref("创建");
    let dialogVisible = ref(false);
    let options = ref([]);
    let responseData = ref({});
    // let codeList = ref([])

    const handleEdit = async (row) => {
      editorOrCreateType.value = 1;
      hanlderCtrName.value = "保存";
      dialogVisible.value = true;
      await nextTick();
      form.value = row;
    };

    const repository_codeClick = (e) => {
      form.value.package_repository_code = e;
    };

    const sysCodeQuery = async () => {
      Request.POST("/background/home/sys_code").then((response) => {
        if (response && response.data) {
          var data = response.data;
          if (data.success) {
            ElMessage.success(data.msg);
            options.value = data.data;
          } else {
            ElMessage.error(data.msg);
          }
        }
      });
    };

    const PackageManageQuery = async () => {
      const response = await Request.GET(
        "/background/home/resource_management/package_manage"
      );
      if (response && response.data) {
        let return_data = response.data;
        if (return_data.success) {
          tableData1.value = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const addTable = async () => {
      editorOrCreateType.value = 0;
      hanlderCtrName.value = "立即创建";
      sysCodeQuery();
      dialogVisible.value = true;
    };

    const handleInsert = async () => {
      if (editorOrCreateType.value === 0) {
        const response = await Request.POST(
          "/background/home/resource_management/package_manage",
          form.value
        );
        if (response && response.data) {
          let data = response.data;
          if (data.success) {
            ElMessage.success(data.msg);
            responseData.value = data;
            PackageManageQuery();
            dialogVisible.value = false;
          } else {
            ElMessage.error(data.msg);
          }
        } else {
          ElMessage.error("timeout");
        }
      } else {
        const response = await Request.PUT(
          "/background/home/resource_management/package_manage",
          form.value
        );
        if (response && response.data) {
          let data = response.data;
          if (data.success) {
            ElMessage.success(data.msg);
            responseData.value = data;
            PackageManageQuery();
            dialogVisible.value = false;
          } else {
            ElMessage.error(data.msg);
          }
        } else {
          ElMessage.error("timeout");
        }
      }
    };

    const handleDelete = async (index, row) => {
      var startIndex = index - 0;
      tableData1.value.splice(startIndex, 1);
      var data = {
        id: row.id,
      };
      Request.DELETE(
        "/background/home/resource_management/package_manage",
        data
      ).then((response) => {
        if (response && response.data) {
          var data = response.data;
          if (data.success) {
            ElMessage.success(data.msg);
            responseData.value = data;
            PackageManageQuery();
            dialogVisible.value = false;
          } else {
            ElMessage.error(data.msg);
          }
        } else {
          ElMessage.error("timeout");
        }
      });
    };

    const handleCancel = async () => {
      dialogVisible.value = false;
    };

    onMounted(PackageManageQuery);
    onMounted(sysCodeQuery);

    return {
      form,
      handleEdit,
      sysCodeQuery,
      editorOrCreateType,
      dialogVisible,
      options,
      tableData1,
      repository_codeClick,
      hanlderCtrName,
      PackageManageQuery,
      handleDelete,
      handleInsert,
      addTable,
      handleCancel,
    };
  },
  components: {
    SysCodeInput,
  },
};
</script>

<style>
.el-dropdown {
  vertical-align: top;
}

.el-dropdown + .el-dropdown {
  margin-left: 10px;
}

.el-icon-arrow-down {
  font-size: 6px;
}
</style>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-form-item {
  margin-right: 15px;
}
</style>
